<template>
  <div>
    <el-menu
       :router='true'
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="main">首页</el-menu-item>
      <el-menu-item index="main">鲜花/干花</el-menu-item>
      <el-submenu index="2" :disabled="bool()">
        <template slot="title" >我的管理</template>
        <el-menu-item index="/pc主页/shopcar">购物车</el-menu-item>
        <el-menu-item index="/pc主页/item">商品详情</el-menu-item>
        <el-menu-item index="2-3">注销</el-menu-item>
        
      </el-submenu>
      <div class="img">
        <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
        <button >注销</button>
      </div>
     
       <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true" id="a">登录</el-button>  /


    <el-dialog title="用户登录" :visible.sync="dialogTableVisible">
      <el-form :model="form">
        <el-form-item label="用户名:" :label-width="formLabelWidth"></el-form-item>
        <el-input v-model="form.name" autocomplete="off"></el-input>
        <el-form-item label="密码:" :label-width="formLabelWidth"></el-form-item>
        <el-input v-model="form.pass" autocomplete="off"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="login(form)">确定登录</el-button>
      </div>
    </el-dialog>

    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true" id="b">注册</el-button>
 
    <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名:" :label-width="formLabelWidth"></el-form-item>
        <el-input autocomplete="off" v-model="form.newname"></el-input>
        <el-form-item label="密码:" :label-width="formLabelWidth"></el-form-item>
        <el-input autocomplete="off" v-model="form.newpass"></el-input>
         <el-form-item label="昵称:" :label-width="formLabelWidth"></el-form-item>
        <el-input autocomplete="off" v-model="form.nickname"></el-input>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="register(form)">确定注册</el-button>
      </div>
    </el-dialog>
    </el-menu>
  
  </div>
</template>


<script>
  
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible:false,
      form: {
        name: "",
        pass: "",
        newname: "",
        newpass: "",
        nickname:'',
        url: ""
      },
      formLabelWidth: "120px",
      fileList: [
        {
          name: "",
          url: ""
        }
      ]
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
       handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
      this.form.url = this.fileList[0].name;
    },
      bool(){
        return false;
      }
    }
  }
</script>


<style>
.img{
 
  height: 40px;
  display: inline-block;
 
 
 
}
.img img{
  height: 100%;
 
}
.upload-demo {
  margin-left: -440px;
  margin-top: 30px;
}
.el-button {
  margin-left: 0px;
}
#a {
  margin-left: -1220px;
}
#b{
  margin-top: 0px;
}
.el-input {
  margin-left: -100px;
  width: 56%;
}
.el-form-item {
  display: block;
}
</style>